<template>
  <div class="pagss">
    <div style="height: 20px;"></div>
    <Navvz></Navvz>

    <el-row :gutter="20" style="margin-right: 5px;">



      <el-col :span="24">
        <el-row>
          <el-col :span="24">
            <div class="panel-group1">
              <div class="space-between">

                <div class="row">
                  <div class="lssx mr_8"></div>
                  <div class="f_16 f_bold">数据概况</div>
                </div>

                <div class="row">
                  <div class="search mr_8">
                    <el-select v-model="game_value" clearable placeholder="全部游戏" style="width: 120px;">
                      <el-option v-for="item in dev_game" :key="item.ulid" :label="item.title" :value="item.ulid">
                      </el-option>
                    </el-select>
                  </div>

                  <!--<div class="search mr_8" style="color: red;">
                    <el-select v-model="channel_value" clearable placeholder="请选择游戏渠道" style="width: 160px;">
                      <el-option v-for="item in channel_options" :key="item.value" :label="item.label" :value="item.value">
                      </el-option>
                    </el-select>
                  </div> -->

                  <!--<div class="search mr_8">
                    <el-date-picker style="width: 230px;" v-model="time_value" type="daterange" range-separator="~" start-placeholder="开始日期" end-placeholder="结束日期">
                    </el-date-picker>
                  </div> -->
                  <el-button style="background:#3FC1C9 ;" @click="searchGame()" type="primary" icon="el-icon-search">搜索</el-button>

                  <!-- <el-button style="background:#3FC1C9 ;" @click="gotoPage('/center/overview')" type="primary" icon="el-icon-search">搜索</el-button> -->



                </div>

              </div>

              <div class="f_14  space-between mt_24" style="margin-right: 110px;">
                <div class="center itmebox">当前在线人数</div>
                <div class="center itmebox">活跃用户</div>
                <div class="center itmebox">激活用户</div>
                <div class="center itmebox">总付费金额</div>
                <div class="center itmebox">总付费数</div>
                <div class="center itmebox">新用户付费数</div>
              </div>

              <div class="f_14  space-between mt_20" style="margin-right: 110px;" v-if="online">

                <div class="center itmebox">
                  <div class="f_36 mr_5">{{online.current_online_population}}</div>
                  <img v-if="online.online_change==2" style="height: 19px;width: 9px;" src="@/assets/images/ljt.jpg" />
                  <img v-if="online.online_change==3" style="height: 19px;width: 9px;" src="@/assets/images/hjt.jpg" />
                </div>


                <div class="center itmebox">
                  <div class="f_36 mr_5">{{active.active_today}}</div>
                  <img v-if="active.active_change==2" style="height: 19px;width: 9px;" src="@/assets/images/ljt.jpg" />
                  <img v-if="active.active_change==3" style="height: 19px;width: 9px;" src="@/assets/images/hjt.jpg" />
                </div>

                <div class="center itmebox">
                  <div class="f_36 mr_5">{{activate.activate}}</div>
                  <img v-if="activate.activate_change==2" style="height: 19px;width: 9px;" src="@/assets/images/ljt.jpg" />
                  <img v-if="activate.activate_change==3" style="height: 19px;width: 9px;" src="@/assets/images/hjt.jpg" />
                </div>

                <div class="center itmebox">
                  <div class="f_36 mr_5">{{total_amount.total_amount_today}}</div>
                  <img v-if="total_amount.total_amount_change==2" style="height: 19px;width: 9px;" src="@/assets/images/ljt.jpg" />
                  <img v-if="total_amount.total_amount_change==3" style="height: 19px;width: 9px;" src="@/assets/images/hjt.jpg" />
                </div>

                <div class="center itmebox">
                  <div class="f_36 mr_5">{{total_count.total_count_today}}</div>
                  <img v-if="total_count.total_count_change==2" style="height: 19px;width: 9px;" src="@/assets/images/ljt.jpg" />
                  <img v-if="total_count.total_count_change==3" style="height: 19px;width: 9px;" src="@/assets/images/hjt.jpg" />
                </div>

                <div class="center itmebox">
                  <div class="f_36 mr_5">{{ffgs.ffgs_today}}</div>
                  <img v-if="ffgs.ffgs_change==2" style="height: 19px;width: 9px;" src="@/assets/images/ljt.jpg" />
                  <img v-if="ffgs.ffgs_change==3" style="height: 19px;width: 9px;" src="@/assets/images/hjt.jpg" />
                </div>

              </div>

              <div class="f_14  space-between mt_24" style="margin-right: 110px;" v-if="online">
                <div class="center itmebox">今日最高<span class="color_F04940 ml_5">{{online.today_highest}}</span></div>
                <div class="center itmebox">昨日总活跃<span class="color_F04940 ml_5">{{active.active_yesterday}}</span></div>
                <div class="center itmebox">昨日激活用户<span class="color_F04940 ml_5">{{activate.activate_z}}</span>人</div>
                <div class="center itmebox">昨日付费总额<span class="color_F04940 ml_5">{{total_amount.total_amount_yesterday}}</span>元</div>
                <div class="center itmebox">昨日付费数<span class="color_F04940 ml_5" style="color:#3FC1C9;">{{total_count.total_count_yesterday}}</span></div>
                <div class="center itmebox">昨日新用户付费<span class="color_F04940 ml_5">{{ffgs.ffgs_yesterday}}</span>人</div>
              </div>
              
            </div>
          </el-col>
        </el-row>




        <el-row :gutter="20" style="margin-top: 30px;">

          <el-col :span="12">
            <div class="panel-group2 ">

              <div class="row_a_c  ml_20" style="padding-top: 20px;">
                <div class="shushu mr_16"></div>
                <div class="f_16 f_bold">在线用户趋势</div>
              </div>

              <div class="row center" v-if="hourlyCounts">
                <div class="wzsp center f_14">在线用户数(人)</div>
                <bar-chatr :hourlyCounts="hourlyCounts"></bar-chatr>
              </div>

            </div>
          </el-col>

          <el-col :span="12">
            <div class="panel-group3 ">

              <div class="row_a_c  ml_20" style="padding-top: 20px;">
                <div class="shushu mr_16"></div>
                <div class="f_16 f_bold">付费额趋势</div>
              </div>

              <div class="row center" v-if="date_key">
                <div class="wzsp center f_14">冲值金额(元)</div>
                <bar-chatr-two :date_key="date_key" :date_values='date_values'></bar-chatr-two>
              </div>

            </div>
          </el-col>

        </el-row>


      </el-col>
    </el-row>




  </div>
</template>

<script>
  import * as Merchant from "@/api/system/user";

  import CountTo from 'vue-count-to'
  import Cookies from 'js-cookie'
  import Vue from 'vue';
  import BarChatr from "@/views/dashboard/BarChart.vue"
  import BarChatrTwo from "@/views/dashboard/BarChartTwo.vue"
  import LineChart from "@/views/dashboard/LineChart.vue"
  import PanelGroup from "@/views/dashboard/PanelGroup.vue"
  import PieChart from "@/views/dashboard/PieChart.vue"
  import RaddarChart from "@/views/dashboard/RaddarChart.vue"
  import Navvz from "@/components/Navvz";
  import Sidebartss from "@/components/Sidebartss";
  import * as DataAnalysis from '@/api/system/data_analysis';


  export default {
    name: 'Index',
    components: {
      CountTo,
      BarChatr,
      BarChatrTwo,
      LineChart,
      PanelGroup,
      PieChart,
      RaddarChart,
      Navvz,
      Sidebartss
    },
    data() {
      return {
        dev_game: null, //开发者游戏
        online: null, //当前在线人数
        active: null, //活跃
        activate: null, //激活
        total_amount: null, //总付费金额
        total_count: null, //总付费个数
        ffgs: null, //新用户付费个数
        hourlyCounts: null, //在线图表
        date_key: null, //付费额趋势键
        date_values: null, //在线用户趋值

        userId: null,
        time_value: '',
        game_options: [{
          value: '传奇',
          label: '传奇'
        }, ],

        channel_options: [{
          value: '选项',
          label: '渠道1'
        }, {
          value: '选项2',
          label: '渠道2'
        }, ],
        game_value: null,
        channel_value: '',
        loading: false,
        GameList: [], //游戏列表
        total: 0,
        business_service: {
          title: "",
          mobile: "",
          qq: ""
        }, //商务信息
        statistics: {},
        // 查询参数
        queryParams: {
          page: 1,
          pageSize: 10,
          state: 1
        },
        merchant: {
          balance: {},
          info: {}
        },
        driver: null,
        isPlay: false,

      }
    },
    created() {
      // this.initChart();
      // this.getVoice();
      this.userId = localStorage.getItem('user_id');
      this.getInfo(); //数据分析
      this.GetDevGame(); //获取开发者游戏
    },
    mounted() {

    },
    methods: {
      //数据分析
      GetDevGame() {
        var per = {
          type_pj: 1,
          user_id: this.userId,

        }
        this.loading = true;
        DataAnalysis.GetDevGame(per).then(response => {
          this.dev_game = response.data.list;
          this.loading = false;
        });
      },

      searchGame() {
        this.getInfo();
      },
      //数据分析
      getInfo() {
        var per = {
          type_pj: 1,
          developer: this.userId,
          game_value: this.game_value,
        }
        this.loading = true;
        DataAnalysis.getInfo(per).then(response => {
          this.online = response.data.online;
          this.active = response.data.active;
          this.activate = response.data.activate;
          this.total_amount = response.data.total_amount;
          this.total_count = response.data.total_count;
          this.ffgs = response.data.ffgs;
          this.hourlyCounts = response.data.hourlyCounts;
          this.date_key = response.data.date_key;
          this.date_values = response.data.date_values;
          this.loading = false;
        });
      },


      gotoPage(url) {
        this.$router.push(url);
      },
      //统计信息
      getStatistics() {

      },
      //统计
      getVoice() {
        let that = this;
        let timer = setInterval(() => {

        }, 5000)
      },
      handleSetLineChartData(type) {
        return false;
        switch (type) {
          case "today_register": //今日注册
            this.$router.push('monitor/game');
            break;
          case "today_pay": //今日充值
            this.$router.push('monitor/game');
            break;
          case "today_recharges": //今日订单
            this.$router.push('monitor/game');
            break;
          case "today_unit_price": //今日客单价

            break;
          case "yesterday_register": //昨日注册
            this.$router.push('monitor/game');
            break;
          case "yesterday_pay": //昨日充值
            this.$router.push('monitor/game');
            break;
          case "yesterday_recharges": //昨日订单
            this.$router.push('monitor/game');
            break;
          case "yesterday_unit_price": //昨日客单价

            break;
          default: //默认
            break;
        }
      },
      initChart() {
        let that = this;
      },
      gotoPage(url) {
        this.$router.push(url);
      }
    }
  }
</script>


<style lang="scss" scoped>
  .sk1 {
    width: 52px;
    height: 20px;
    background: #E8FEFF;
    margin-right: 10px;
  }

  .sk2 {
    width: 52px;
    height: 20px;
    background: #CAF9FC;
    margin-right: 10px;
  }

  .sk3 {
    width: 52px;
    height: 20px;
    background: #A5EDF1;
    margin-right: 10px;
  }

  .sk4 {
    width: 52px;
    height: 20px;
    background: #80DFE5;
    margin-right: 10px;
  }

  .sk5 {
    width: 52px;
    height: 20px;
    background: #63D0D7;
    margin-right: 10px;
  }

  .sk6 {
    width: 52px;
    height: 20px;
    background: #3FC1C9;
    margin-right: 10px;
  }

  .zy {
    position: relative;
    top: -25px;
    left: 200px;
  }

  .xy {
    position: relative;
    top: 50px;
    left: 340px;
  }

  .lc {
    position: relative;
    top: 140px;
    left: 210px;
  }

  .zs {
    position: relative;
    top: 8px;
    left: 80px;
  }


  .zss {
    position: relative;
    top: 8px;
    left: 70px;
  }

  .am {
    position: relative;
    top: -10px;
    left: 220px;
    font-size: 26px;

  }






  // <div class="zy" >中午12:00</div>
  //  <div class="xy">下午15:00</div>
  // <div class="lc">凌晨6:00</div>
  // <div class="zs">早上9:00</div>
  // <div class="am">AM</div>

  ::v-deep .elmenu {
    height: 105vh !important;
  }

  .pagss {
    // height: 100%;
    background: #E4EEF9;
    // padding: 5px 0 15px 40px;
  }

  .wzsp {
    // margin-top: 100px;
    padding-left: 50px;
    writing-mode: vertical-rl;
  }

  .shushu {
    width: 8px;
    height: 20px;
    background: #3FC1C9;
  }

  .panel-group1 {
    padding: 20px;
    margin-top: 18px;
    margin-bottom: 20px;
    margin-left: 15px;
    // margin-right: 15px;
    height: 250px;
    background: #FFFFFF;
    box-shadow: 1px 5px 9px 1px rgba(180, 185, 242, 0.68);
    border-radius: 10px 10px 10px 10px;
    opacity: 1;
  }


  .panel-group11 {
    padding: 20px;
    // margin-top: 18px;
    margin-bottom: 20px;
    margin-left: 15px;
    height: 260px;
    background: #FFFFFF;
    box-shadow: 1px 5px 9px 1px rgba(180, 185, 242, 0.68);
    border-radius: 10px 10px 10px 10px;
    opacity: 1;
  }

  .panel-group2 {
    margin-top: -30px;
    height: 300px;
    margin-left: 15px;
    margin-bottom: 20px;
    background: #FFFFFF;
    box-shadow: 1px 5px 9px 1px rgba(180, 185, 242, 0.68);
    border-radius: 10px 10px 10px 10px;
    opacity: 1;
  }


  .panel-group3 {
    margin-top: -30px;
    height: 300px;
    margin-bottom: 0px;
    background: #FFFFFF;
    box-shadow: 1px 5px 9px 1px rgba(180, 185, 242, 0.68);
    border-radius: 10px 10px 10px 10px;
    opacity: 1;
  }


  .lssx {
    width: 4px;
    height: 24px;
    background: #3FC1C9;
    border-radius: 0px 0px 0px 0px;
    opacity: 1;
  }

  ::v-deep .el-input--medium .el-input__inner {
    background: #F0F3F8;
    border: 1px solid #F0F3F8;

  }

  ::v-deep .el-select .el-input .el-select__caret {
    color: #000000 !important;
  }

  ::v-deep .el-range-editor.el-input__inner {
    background: #F0F3F8;
  }

  ::v-deep .el-range-editor--medium .el-range-input {
    font-size: 14px;
    background: #F0F3F8;
    color: #000000;
  }

  ::v-deep .el-input__inner {
    border: 1px solid #F0F3F8;

  }

  ::v-deep .el-date-editor .el-range__icon {
    color: #000000;
  }


  ::v-deep .el-menu-item * {
    font-size: 18px;
    // margin-top: 20px;

  }


  .item_nav {
    margin-bottom: 20px !important;
  }

  ::v-deep .el-tabs__item {
    font-size: 18px;
    color: black;
    font-weight: bold;
  }

  ::v-deep .el-tabs__item.is-active {
    color: #409EFF;
  }






  .search {

    ::v-deep .el-input__inner,
    ::v-deep .el-date-editor .el-range-input {
      &::placeholder {
        color: #000000;
      }

      &::-webkit-input-placeholder {
        /* WebKit browsers 适配谷歌 */
        color: #000000;
      }

      &:-moz-placeholder {
        /* Mozilla Firefox 4 to 18 适配火狐 */
        color: #000000;
      }

      &::-moz-placeholder {
        /* Mozilla Firefox 19+ 适配火狐 */
        color: #000000;
      }

      &:-ms-input-placeholder {
        /* Internet Explorer 10+  适配ie*/
        color: #000000;
      }
    }
  }

  .itmebox {
    min-width: 150px;
  }

  .hjt {
    width: 9px;
    height: 19px;
    background: #D40000;
    opacity: 1;
  }



  .el-submenu__title * {
    font-size: 18px;

  }

  .el-submenu .el-menu-item {
    // margin-left: 20px;
    padding-left: 60px !important;
  }
</style>

<style>
  .search {
    .el-input__inner::placeholder {
      color: #000000;
    }

    /* 谷歌 */
    .el-input__inner::-webkit-input-placeholder {
      color: #000000;
    }

    /* 火狐 */
    .el-input__inner:-moz-placeholder {
      color: #000000;
    }

    /*ie*/
    .el-input__inner:-ms-input-placeholder {
      color: #000000;
    }
  }
</style>
